<template>
  <view>
    <!-- <view class="pwd-retrieve-container state-box  box">
    <u--form labelPosition="left" ref="form" :value="user" labelWidth="80px">
      <u-form-item name="oldPassword" label="旧密码">
        <u--input type="password" placeholder="请输入旧密码" style="border: none;"/>
      </u-form-item>
      <u-form-item name="newPassword" label="新密码">
        <u--input type="password" placeholder="请输入新密码" />
      </u-form-item>
      <u-form-item name="confirmPassword" label="确认密码">
        <u--input type="password" placeholder="请确认新密码" />
      </u-form-item>
      <button type="primary">提交</button>
    </u--form> -->
    <view class="state-box box">

      <u--form labelPosition="left" ref="uForm">

        <u-form-item label="旧密码:" labelWidth="150px" borderBottom ref="item1">
          <u--input disabledColor="#ffffff" placeholder="蔡明瑞" border="none"></u--input>

        </u-form-item>

        <u-form-item label="新密码：" labelWidth="200px" borderBottom >
          <u--input disabledColor="#ffffff" placeholder="1122334435" border="none"></u--input>
        </u-form-item>

        <u-form-item label="确认新密码：" labelWidth="100px !important">
          <u--input disabledColor="#ffffff" placeholder="生产部门" border="none"></u--input>
        </u-form-item>

      </u--form></view>

    
    <view class="buttonn">
      提交
    </view>
  </view>
</template>

<script>
  // import { updateUserPwd } from "@/api/system/user"

  // export default {
  //   data() {
  //     return {
  //       user: {
  //         oldPassword: undefined,
  //         newPassword: undefined,
  //         confirmPassword: undefined
  //       },
  //       rules: {
  //         oldPassword: {
  //           rules: [{
  //             required: true,
  //             errorMessage: '旧密码不能为空'
  //           }]
  //         },
  //         newPassword: {
  //           rules: [{
  //               required: true,
  //               errorMessage: '新密码不能为空',
  //             },
  //             {
  //               minLength: 6,
  //               maxLength: 20,
  //               errorMessage: '长度在 6 到 20 个字符'
  //             }
  //           ]
  //         },
  //         confirmPassword: {
  //           rules: [{
  //               required: true,
  //               errorMessage: '确认密码不能为空'
  //             }, {
  //               validateFunction: (rule, value, data) => data.newPassword === value,
  //               errorMessage: '两次输入的密码不一致'
  //             }
  //           ]
  //         }
  //       }
  //     }
  //   },
  //   onReady() {
  //     this.$refs.form.setRules(this.rules)
  //   },
  //   methods: {
  //     submit() {
  //       this.$refs.form.validate().then(res => {
  //         updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
  //           this.$modal.msgSuccess("修改成功")
  //         })
  //       })
  //     }
  //   }
  // }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  // .pwd-retrieve-container {
  //   padding-top: 36rpx;
  //   padding: 15px;
  // }
  .state-box {
    margin: 32rpx 32rpx 48rpx 32rpx;
    padding: 48rpx 0 32rpx 32rpx;
    // height: 450rpx;
    opacity: 1;
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);
  }

   .buttonn{
     margin-top:100rpx !important;
    height: 40px;
    opacity: 1;
    border-radius: 30px;
    background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
    text-align:center;
    line-height:40px;
    margin:0 32rpx 0 32rpx;
    color:rgba(255, 255, 255, 1);
  }
 ::v-deep .u-form-item{
   display: flex;
       flex-direction: column;
       font-size: 14px;
       color: #303133;
       width: 96%;
 }
 ::v-deep .u-form-item__body__left {
     width: 95px !important;
     display: flex;
     flex-direction: row;
     align-items: center;
 }
</style>